<template>
  <MainLayout>
    <div class="settings-container">
      <el-card class="settings-card">
        <h2 class="settings-title">系统设置</h2>

        <el-tabs v-model="activeTab" class="settings-tabs">
          <el-tab-pane label="基本设置" name="basic">
            <el-form ref="basicForm" :model="basicSettings" label-width="120px" class="settings-form">
              <el-form-item label="应用名称" prop="appName">
                <el-input v-model="basicSettings.appName" placeholder="输入应用名称" />
              </el-form-item>
              <el-form-item label="默认语言" prop="defaultLang">
                <el-select v-model="basicSettings.defaultLang" placeholder="选择默认语言">
                  <el-option label="简体中文" value="zh-CN" />
                  <el-option label="English" value="en-US" />
                  <el-option label="日本語" value="ja-JP" />
                </el-select>
              </el-form-item>
              <el-form-item label="时区设置" prop="timezone">
                <el-select v-model="basicSettings.timezone" placeholder="选择时区">
                  <el-option label="UTC+8 (Asia/Shanghai)" value="Asia/Shanghai" />
                  <el-option label="UTC-5 (America/New_York)" value="America/New_York" />
                  <el-option label="UTC+0 (Europe/London)" value="Europe/London" />
                </el-select>
              </el-form-item>
              <el-form-item label="自动备份" prop="autoBackup">
                <el-switch v-model="basicSettings.autoBackup" />
              </el-form-item>
              <el-form-item label="备份频率" prop="backupInterval" v-if="basicSettings.autoBackup">
                <el-select v-model="basicSettings.backupInterval">
                  <el-option label="每天" value="daily" />
                  <el-option label="每周" value="weekly" />
                  <el-option label="每月" value="monthly" />
                </el-select>
              </el-form-item>
              <el-form-item label="主题模式" prop="themeMode">
                <el-radio-group v-model="basicSettings.themeMode">
                  <el-radio label="light">浅色模式</el-radio>
                  <el-radio label="dark">深色模式</el-radio>
                  <el-radio label="auto">跟随系统</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="form-actions">
                <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
                <el-button @click="resetBasicSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="服务器设置" name="server">
            <el-form ref="serverForm" :model="serverSettings" label-width="120px" class="settings-form">
              <el-form-item label="默认端口范围" prop="portRange">
                <el-input v-model="serverSettings.portRange" placeholder="例如: 8211-8220" />
              </el-form-item>
              <el-form-item label="最大服务器数" prop="maxServers">
                <el-input-number v-model="serverSettings.maxServers" :min="1" :max="50" :step="1" />
              </el-form-item>
              <el-form-item label="默认玩家上限" prop="defaultMaxPlayers">
                <el-input-number v-model="serverSettings.defaultMaxPlayers" :min="1" :max="100" :step="1" />
              </el-form-item>
              <el-form-item label="自动清理日志" prop="autoCleanLogs">
                <el-switch v-model="serverSettings.autoCleanLogs" />
              </el-form-item>
              <el-form-item label="日志保留天数" prop="logRetentionDays" v-if="serverSettings.autoCleanLogs">
                <el-input-number v-model="serverSettings.logRetentionDays" :min="1" :max="90" :step="1" />
              </el-form-item>
              <el-form-item label="默认服务器配置" prop="defaultConfig">
                <el-select v-model="serverSettings.defaultConfig">
                  <el-option label="标准配置" value="standard" />
                  <el-option label="高性能配置" value="high-performance" />
                  <el-option label="低资源配置" value="low-resource" />
                </el-select>
              </el-form-item>
              <el-form-item class="form-actions">
                <el-button type="primary" @click="saveServerSettings">保存设置</el-button>
                <el-button @click="resetServerSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="网络设置" name="network">
            <el-form ref="networkForm" :model="networkSettings" label-width="120px" class="settings-form">
              <el-form-item label="绑定IP地址" prop="bindIp">
                <el-input v-model="networkSettings.bindIp" placeholder="例如: 0.0.0.0" />
              </el-form-item>
              <el-form-item label="启用HTTPS" prop="enableHttps">
                <el-switch v-model="networkSettings.enableHttps" />
              </el-form-item>
              <el-form-item label="SSL证书路径" prop="sslCertPath" v-if="networkSettings.enableHttps">
                <el-input v-model="networkSettings.sslCertPath" placeholder="证书文件路径" />
              </el-form-item>
              <el-form-item label="SSL密钥路径" prop="sslKeyPath" v-if="networkSettings.enableHttps">
                <el-input v-model="networkSettings.sslKeyPath" placeholder="密钥文件路径" />
              </el-form-item>
              <el-form-item label="API请求限流" prop="enableRateLimit">
                <el-switch v-model="networkSettings.enableRateLimit" />
              </el-form-item>
              <el-form-item label="每分钟请求限制" prop="rateLimitPerMinute" v-if="networkSettings.enableRateLimit">
                <el-input-number v-model="networkSettings.rateLimitPerMinute" :min="10" :max="1000" :step="10" />
              </el-form-item>
              <el-form-item class="form-actions">
                <el-button type="primary" @click="saveNetworkSettings">保存设置</el-button>
                <el-button @click="resetNetworkSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="安全设置" name="security">
            <el-form ref="securityForm" :model="securitySettings" label-width="120px" class="settings-form">
              <el-form-item label="密码策略" prop="passwordPolicy">
                <el-select v-model="securitySettings.passwordPolicy">
                  <el-option label="低 (至少6位)" value="low" />
                  <el-option label="中 (至少8位，包含字母和数字)" value="medium" />
                  <el-option label="高 (至少10位，包含字母、数字和特殊字符)" value="high" />
                </el-select>
              </el-form-item>
              <el-form-item label="登录尝试限制" prop="loginAttemptLimit">
                <el-input-number v-model="securitySettings.loginAttemptLimit" :min="3" :max="10" :step="1" />
              </el-form-item>
              <el-form-item label="会话超时时间(分钟)" prop="sessionTimeout">
                <el-input-number v-model="securitySettings.sessionTimeout" :min="5" :max="120" :step="5" />
              </el-form-item>
              <el-form-item label="启用2FA" prop="enable2FA">
                <el-switch v-model="securitySettings.enable2FA" />
              </el-form-item>
              <el-form-item label="API密钥过期时间(天)" prop="apiKeyExpiry">
                <el-input-number v-model="securitySettings.apiKeyExpiry" :min="7" :max="365" :step="1" />
              </el-form-item>
              <el-form-item class="form-actions">
                <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
                <el-button @click="resetSecuritySettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import MainLayout from '@/components/layout/MainLayout.vue';
import { ElMessage } from 'element-plus';

// 标签页状态
const activeTab = ref('basic');

// 基本设置
const basicSettings = reactive({
  appName: '幻兽帕鲁开服管理器',
  defaultLang: 'zh-CN',
  timezone: 'Asia/Shanghai',
  autoBackup: true,
  backupInterval: 'daily',
  themeMode: 'light'
});

// 服务器设置
const serverSettings = reactive({
  portRange: '8211-8220',
  maxServers: 10,
  defaultMaxPlayers: 20,
  autoCleanLogs: true,
  logRetentionDays: 30,
  defaultConfig: 'standard'
});

// 网络设置
const networkSettings = reactive({
  bindIp: '0.0.0.0',
  enableHttps: false,
  sslCertPath: '',
  sslKeyPath: '',
  enableRateLimit: true,
  rateLimitPerMinute: 60
});

// 安全设置
const securitySettings = reactive({
  passwordPolicy: 'medium',
  loginAttemptLimit: 5,
  sessionTimeout: 30,
  enable2FA: false,
  apiKeyExpiry: 30
});

// 保存基本设置
const saveBasicSettings = () => {
  ElMessage.success('基本设置保存成功');
};

// 重置基本设置
const resetBasicSettings = () => {
  Object.assign(basicSettings, {
    appName: '幻兽帕鲁开服管理器',
    defaultLang: 'zh-CN',
    timezone: 'Asia/Shanghai',
    autoBackup: true,
    backupInterval: 'daily',
    themeMode: 'light'
  });
};

// 保存服务器设置
const saveServerSettings = () => {
  ElMessage.success('服务器设置保存成功');
};

// 重置服务器设置
const resetServerSettings = () => {
  Object.assign(serverSettings, {
    portRange: '8211-8220',
    maxServers: 10,
    defaultMaxPlayers: 20,
    autoCleanLogs: true,
    logRetentionDays: 30,
    defaultConfig: 'standard'
  });
};

// 保存网络设置
const saveNetworkSettings = () => {
  ElMessage.success('网络设置保存成功');
};

// 重置网络设置
const resetNetworkSettings = () => {
  Object.assign(networkSettings, {
    bindIp: '0.0.0.0',
    enableHttps: false,
    sslCertPath: '',
    sslKeyPath: '',
    enableRateLimit: true,
    rateLimitPerMinute: 60
  });
};

// 保存安全设置
const saveSecuritySettings = () => {
  ElMessage.success('安全设置保存成功');
};

// 重置安全设置
const resetSecuritySettings = () => {
  Object.assign(securitySettings, {
    passwordPolicy: 'medium',
    loginAttemptLimit: 5,
    sessionTimeout: 30,
    enable2FA: false,
    apiKeyExpiry: 30
  });
};
</script>

<style scoped>
.settings-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-card {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-title {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.settings-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.el-tabs__content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.settings-form {
  max-width: 800px;
}

.form-actions {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>